<template>
  <div style="padding:10px">
    <Row :gutter="16">
      <Col span="6"
           style="margin-bottom:10px"
           v-for="(e,i) in list"
           :key="i">
      <Card>
        <img @click="dtl(e)"
             :src="e.bannerurl"
             style="width:100%">
      </Card>
      </Col>
    </Row>

  </div>
</template>
<style scoped>
.ivu-card-body {
  padding: 10px;
}
</style>
<script>
import api from '../utils/api'

export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      api.ranking(res => {
        let list = []
        res.data.obj.rank.list.forEach(el => {
          el.bannerurl = el.bannerurl.replace(/{size}/, '400')
          list.push(el)
        })
        this.list = list
      })
    },
    dtl (e) {
      api.rankInfo(e.rankid, 1, res => {
        this.$store.commit('music/copyLists', res.data.obj.songs.list)
        this.$router.push({ path: `/list/${e.rankid}` })
      })
    }
  }
}
</script>

